<template>
    <div>
        <div class="optimization">
            <span class="youxuanNewMan home-title-A">优选新人</span>
            <ul>
                <li v-for="(item,index) in newManList" :key="index" @click="detailLink(item)">
                    <img :src="$imgPath(item.headImg)">
                    <div class="shade"></div>
                    <div class="optimization-sta">
                        <h2>{{item.userName}}</h2>
                        <!-- <p>{{item.descript}}</p> -->
                        <i class="nan" v-if="item.sex == 1">{{item.age}}</i>
                        <i v-if="item.sex == 2">{{item.age}}</i>
                    </div>
                </li>
            </ul>
            <div class="main">
                <a class="last" @click="newPersonDisplay()"></a>
                <a class="next" @click="newPersonDisplay()"></a>
            </div>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            newManList:[]
        }
    },
    mounted(){
        this.newPersonDisplay()
    },
    methods:{
        // 新人推荐
        newPersonDisplay(){
            let parmes = {
                size:6
            }
            apiHttp.apiIndex.newPersonDisplay(parmes,resp=>{
                if(resp.code == 200){
                    this.newManList = resp.data
                }
            })
        },
        // 跳转到详情页
        detailLink(item){
            let routeData = this.$router.resolve({
                name:'detail',
                params:{
                    userId:item.userId,
                },
                query:{
                    serviceId:item.serverId
                }
            })
            window.open(routeData.href, '_blank')
        }
    }
}
</script>
<style scoped>
.nan{
    background: url('../../assets/img/nanB.png') no-repeat 10px #7fc8fd !important;
}
</style>


